
<template>
    <el-container>
        <el-header >
           <el-col class="over">
               <el-col   class="leftmenu">
                   <el-col  :span="6" class="left">
                       <span class="zi" style="text-align: left">输入评论内容：</span>
                       <el-input class="inputM" v-model="inputname" placeholder="商品名称"></el-input>
                   </el-col>
                   <el-col :span="2">
                       <el-button type="primary" plain class="btnsousuo" @click="sousuo">搜索</el-button>
                   </el-col>

               </el-col>

           </el-col>
        </el-header>


        <el-main>
            <el-table class="tablemenu"
                      :data="tableData"
                      stripe
                      style="width: 100%">


                <el-table-column
                        prop="commentId"
                        label="ID" width="60">
                </el-table-column>

                <el-table-column
                        prop="goodsName"
                        label="用户名称">
                </el-table-column>


                <el-table-column
                        prop="commentContent"
                        label="评论内容">
                </el-table-column>


                <el-table-column
                        prop="commentCreateTime"
                        label="评论时间">
                </el-table-column>


                <el-table-column   label="推荐">
                    <templete  slot-scope="scope">
                        <el-switch
                                v-model="(scope.row.commentRec).toString()"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                 @change='changeTui(scope.row)'>
                        </el-switch>
                    </templete>
                </el-table-column>


                <el-table-column   label="状态">
                    <templete  slot-scope="scope" prop="commentStatus">
                        <el-switch
                                v-model="(scope.row.commentStatus).toString()"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change='changeStatus(scope.row)'
                        >
                        </el-switch>
<!--                        <el-switch-->
<!--                                v-model="value"-->
<!--                                active-color="#13ce66"-->
<!--                                inactive-color="#ff4949">-->
<!--                        </el-switch>-->
                    </templete>
                </el-table-column>


                <el-table-column prop="caozuo" label="操作">
                    <template slot-scope="scope">
                        <el-button   type="danger" icon="el-icon-delete" class="btn" circle @click="del(scope.row.commentId)" ></el-button>
                    </template>
                </el-table-column>
            </el-table>

<!--页码-->

                <el-pagination class="rightye"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"

                               :page-size="5"
                               layout="total, prev, pager, next"
                               :total="count">
                </el-pagination>



        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "message",
        methods: {


            //改变推送
            changeTui(data){
                // console.log(data)
                data.commentRec==1 ? data.commentRec=0:data.commentRec=1

                this.$axios.post('/api/comment/update/one?commentId='+data.commentId+"&commentRec="+data.commentRec).then((res)=>{
                    console.log("one")
                    // console.log(res);
                    this.$message({
                        type:'success',
                        message: '推送更改成功!'
                    });
                    this.getMess();
                })

            },




            //改变状态
            changeStatus(data){
                console.log(data)// 0 1 0 1 0 1 状态可以获取到
                data.commentStatus==1 ? data.commentStatus=0:data.commentStatus=1

                // '/api/comment/isViewList?commentKeyWords='+this.inputname   commentId  commentStatus
                this.$axios.post('/api/comment/update/one?commentId='+data.commentId+"&commentStatus="+data.commentStatus).then((res)=>{

                    // console.log(res);
                    this.$message({
                        type:'success',
                        message: '状态更改成功!'
                    });
                    this.getMess();

                })
            },




            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);


            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);


            },


            //状态







             //删除
            del(id){
                var commentIds=[];
                commentIds.push(id);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }). then(() =>{
                    this.$axios.post('/api/comment/delete',[...commentIds]).then((res)=>{
                        // console.log(res.data);
                        this.getMess();
                    })
                    this.$message({
                        type:'success',
                        message: '删除成功!'
                    });
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'已取消删除!'
                    });
                });
            },













            sousuo(){
                // console.log(this.inputname)
               this.$axios.post('/api/comment/isViewList?commentKeyWords='+this.inputname).then((res)=>{
                    // console.log(res.data.data)
                   this.$message({
                       type:'success',
                       message: '搜索成功!'
                   });
                   this.tableData=res.data.data
                   // this.getMess()
               })

            },


            //得到显示数据
            getMess(){
                this.$axios.post('/api/comment/isViewList',).then((res)=>{
                    // console.log(123456)
                    // console.log(res)
                    this.tableData=res.data.data
                    this.count=res.data.count;

                })
            }


        },
        data() {
            return {
                count:null,
                inputname: '',
                value:true,
                totalCount:20,
                tableData: [

                ]

            }
        },

        created() {
            this.getMess();
        },


        //重新加载的
        updated() {
            this.getMess()
        }
    }
</script>

<style scoped>
    .left{
        text-align:left;
    }
    .zi{
        font-size: 14px;
        color: black;
    }
    .inputM{
        width: 200px;
        height: 32px;
        border-radius: 40%;
    }
   .zuo{
     margin-left: 520px;
   }
    .rightye{
        margin-top: 10px;
        float: right;
    }

</style>
>>>>>>> origin/lx
